<template>
  <page-form-row>
    <page-form-item label="车辆来源" required>
      <a-radio-group v-model="form.carSource" @change="changeCarSourceFn">
        <a-radio :value="item.value" v-for="(item, index) in dict.carSourceEnum" :key="index">{{ item.label }}</a-radio>
      </a-radio-group>
    </page-form-item>
    <page-form-item label="车牌号" labelTooltipContent="请先选择租赁周期和取车门店后，再选择排车车辆">
      <select-input :disable="!form.rentDays || !form.siteId" v-model="form.licenseNo" @clear="clearCarFn" @click="selectCarFn" />
    </page-form-item>
    <page-form-item label="排车车型" size="1" class="mb-0"> {{ form.originalSiteModelName || '-' }} </page-form-item>
  </page-form-row>
  <!-- 选择车牌号 -->
  <car-selector :isLongOrder="true" ref="carSelectorRef" mode="select" @confirm="carConfirmFn" />
</template>
<script setup>
  import { ref, inject, watch } from 'vue'
  import carSelector from '@/views/assets/car/stock/car-selector.vue'
  import { getCarModelStock } from '@/api/asset/carModelStock'
  import selectInput from './select-input.vue'

  const form = inject('form')
  const dict = inject('dict')
  import { Message } from '@arco-design/web-vue'
  const formDisabled = inject('formDisabled')

  // 选择车牌
  const carSelectorRef = ref()
  const selectCarFn = () => {
    if (formDisabled) return
    if (form.value.rentDays && form.value.siteId) {
      // 无车辆不缓存筛选条件
      if (!form.value.carId) {
        platoonModelQueryParam.value = {}
      }
      const param = {
        // siteId: form.value.siteId,
        modelId: form.value.originalModelId,
        dateRange: form.value.timeRange,
        id: form.value.carId,
        ...platoonModelQueryParam.value,
        carSource: form.value.carSource,
      }
      carSelectorRef.value.open(param, {
        orderStatus: 10,
        startTime: form.value.timeRange[0],
        endTime: form.value.timeRange[1],
        siteId: form.value.siteId,
        modelId: form.value.originalModelId,
      })
    } else {
      Message.error('请先选择租赁周期和取车门店后，再选择车辆')
    }
  }
  // 更换车辆来源
  const changeCarSourceFn = () => {
    form.value.carId = undefined
    form.value.licenseNo = undefined
    form.value.carModelId = undefined
    form.value.carModelName = undefined
  }
  // 选择车牌完成后
  const platoonModelQueryParam = ref({})
  const carConfirmFn = (id, option = {}, queryParam) => {
    form.value.carId = id
    form.value.licenseNo = option.licenseNo
    form.value.carModelId = option.modelId
    form.value.carModelName = option.modelName
    // 记录弹窗queryParam
    platoonModelQueryParam.value = { ...queryParam }

    // 更新下单车型
    getCarModelStock({
      siteId: form.value.siteId,
      startTime: form.value.timeRange[0],
      endTime: form.value.timeRange[1],
    }).then((res) => {
      const result = res.result
      if (result && result.list) {
        // 车型列表
        const lists = result.list
        // 是否有同名车型
        const carModelId = option.modelId
        const sameModel = lists.find((item) => item.id === carModelId)
        // 存在同名车型
        if (sameModel) {
          form.value.originalModelId = sameModel.id
          form.value.originalModelName = sameModel.modelName
        } else {
          form.value.originalModelId = undefined
          form.value.originalModelName = undefined
        }
      } else {
        // 不存在车型
        form.value.originalModelId = undefined
        form.value.originalModelName = undefined
      }
    })
  }
  // 清空车牌
  const clearCarFn = () => {
    if (form.value.licenseNo) {
      form.value.carId = undefined
      form.value.licenseNo = undefined
      form.value.carModelId = undefined
      form.value.carModelName = undefined
    }
  }

  watch(
    () => form.value.carId,
    (newVal) => {
      if (!newVal) {
        platoonModelQueryParam.value = {}
      }
    }
  )
</script>
<style lang="less" scoped></style>
